import React, { Component } from 'react';
import { searche_list } from "../../utils/api"
import { withRouter } from "react-router-dom"
import MyHeader from "../Goods/MyHeader"

import { Toast } from 'antd-mobile'
//获取全部商品页面
class Mygoodslist extends Component {

    constructor(props) {
        super(props);
        this.state = {
            id: "",
            currentIndex: 0,
            goodban: ["综合", "销量", "新品", "价格", "筛选"],
            goodslist: [],
        }
    }

    //点击每个span高亮  排序
    getsort(index) {
        this.setState({
            currentIndex: index,
        })
        if (index === 3) {
            this.setState({
                goodslist: this.state.goodslist.sort((b, a) => {
                    return b.salesPrice.value - a.salesPrice.value
                })
            })
        }
    }
    //页面一开始获取数据  根据点击的商品跳到对应商品id
    componentDidMount() {
        console.log(this.props);
        this.setState({
            id: this.props.match.params.id
        }, () => {
            searche_list({ params: { id: this.state.id } }).then((res) => {
                console.log(3333, res.data.list);
                if (res.data.list) {
                    this.setState({
                        goodslist: res.data.list
                    })
                } else {
                    Toast.show({
                        icon: 'success',
                        content: '商品已下架',
                    })
                }
            })
        })
    }
    add = (e) => {
        this.props.history.push(`/goodsdetil/${e}`)
    }
    render() {
        return (
            <div className='allgood'>
                <div className='positions'>
                    <MyHeader></MyHeader>
                    <div className="goodban">
                        {
                            this.state.goodban.map((item, index) => {
                                return (
                                    <span
                                        key={index}
                                        className={this.state.currentIndex == index ? "spangaol" : ""}
                                        onClick={() => { this.getsort(index) }}
                                    >
                                        {item}
                                    </span>
                                )
                            })
                        }
                    </div>
                </div>
                <div className="goodall">
                    {
                        this.state.goodslist.map((item, index) => {
                            return (
                                <div className="onegood" key={item.id} onClick={() => { this.add(item.id) }}>
                                    <img src={item.pic} alt="" />
                                    <p>{item.name}</p>
                                    <div>免税价￥{item.salesPrice.value}</div>
                                </div>
                            )
                        })
                    }
                </div>
            </div>
        );
    }
}

export default withRouter(Mygoodslist);